<template>
  <div class="page-container">
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="handleDelete">确 定</el-button>
                </span>
      </template>
    </el-dialog>
    <div class="search">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6" style="padding: 0 8px;">
            <el-form-item label="名称" prop="id">
              <el-input v-model="searchObject.name" placeholder="代码段名称" name="id" @keyup.enter="search">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18" style="padding: 0 10px;">
            <el-row type="flex" justify="end">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button plain @click="clearSearch">清除条件</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="data-content">
      <div class="tool-add">
        <el-button type="primary" @click="addView">新增</el-button>
      </div>

      <el-table v-loading="loading" :data="pageData.data" @sort-change="changeTableSort"
                style="width: 100%;font-size: 12px;">
        <el-table-column label="序号" type="index">
        </el-table-column>
        <el-table-column label="代码段名称" prop="name" width="300">
        </el-table-column>
        <el-table-column label="代码" prop="note" show-overflow-tooltip>
        </el-table-column>
        <el-table-column width="210" align="center" fixed="right" label="操作">
          <template #default="scope">
            <el-button text class="operation_bt" :icon="InfoFilled" type="info" @click="showView(scope.row)">详情
            </el-button>

            <el-button text class="operation_bt" :icon="Edit" type="primary" @click="editView(scope.row)">编辑
            </el-button>

            <el-button text :icon="Delete" class="operation_bt" type="danger" style="cursor: pointer;"
                       @click="deleteData(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                       :page-size="pageData.size" :pager-count="5"
                       layout="total, sizes, prev, pager, next, jumper" :page-count="pageData.totalPage"
                       :total="pageData.total" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import {Delete, Edit, InfoFilled} from '@element-plus/icons-vue'
import {defineStore} from 'pinia'
import {usePage} from "@/utils/usePage";
import {useDelete} from "@/utils/useDelete";
import {useView} from "@/utils/useView";
import {useData} from "@/utils/useData";

const searchStore = defineStore('querySnippetStore', {

  state: () => {
    return {
      searchObject: {
        no: 1,
        size: 20,
        sortField: "id",
        sortMethod: "desc",
      }
    }
  }
})

const {searchObject} = searchStore();

const clearSearch = () => {
}
const {
  pageData,
  sizeChange,
  pageChange,
  search,
  changeTableSort,
  loading
} = usePage("/querySnippet/search", searchObject);
const {dialogVisible, deleteData, handleDelete} = useDelete("/querySnippet/delete", search);
const {showView, addView, editView} = useView();

</script>


<style scoped lang="scss">
.page-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.data-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止容器出现滚动条 */
  border: none;
}


:deep(.el-table) {
  --el-table-border-color: #dcdfe6;
  flex: 1; /* 表格占满剩余空间 */
  overflow: auto; /* 内容过多时滚动 */
}
</style>